昨天整理了我想和 Codex 合作的方式：一次只處理一個小功能，修改後也要確認它究竟動了哪些地方。

今天決定先從一個很小的問題開始。

如果使用者沒有輸入內容就按下儲存，Idea Note 不應該新增一則空白筆記。

這聽起來很簡單，只要判斷輸入框是不是空的就好。但實際測試時，還有一種比較容易漏掉的情況：

使用者可能沒有輸入文字，卻按了好幾次空白鍵。

畫面看起來仍然是一片空白，可是對 JavaScript 來說，那串空白仍然是有內容的字串。

這次給 Codex 的需求

我沒有直接要求 Codex「幫我完善新增筆記功能」，因為這句話的範圍太大，它可能順便修改其他程式。

這次只提出一個明確的小任務：

請檢查目前新增筆記的程式。儲存前先移除文字前後的空白；如果處理後沒有任何內容，就不要新增筆記。這次不要修改其他功能。

這個需求包含三個限制：

• 只處理新增筆記
• 空白內容不能通過
• 不要順便改其他功能

我想確認，把任務縮小之後，Codex 的修改是不是也會比較容易理解。

trim() 在這裡做了什麼？

這次會用到 JavaScript 的 trim()。

假設輸入內容是：

const inputValue = "   今天想到的新點子   ";

使用 trim() 後：

const content = inputValue.trim();

前後多餘的空白會被移除，留下真正的內容：

"今天想到的新點子"

如果使用者只按了空白鍵：

const inputValue = "     ";

經過 trim() 處理後，就會變成空字串：

""

這時再判斷內容是否為空，就能阻止這則筆記被新增。

const content = noteInput.value.trim();

if (content === "") {
  return;
}

return 會讓函式在這裡停止，後面的新增動作不再繼續執行。

不能只測正常情況

如果我只輸入一段正常文字，確認它能成功新增，其實還不算測試完成。

這次至少要檢查四種情況：

1. 完全沒有輸入內容，直接按下儲存。
2. 只輸入空白，再按下儲存。
3. 文字前後包含空白。
4. 輸入正常文字並儲存。

我原本最容易忽略的是第三種。

如果使用者輸入「　今天買牛奶　」，前後的空白沒有實際意義，保存時可以直接去除；但句子中間的空白仍然必須保留，不能把整段文字全部黏在一起。

所以這裡要處理的是前後空白，而不是刪除內容中的所有空格。

要不要顯示錯誤訊息？

阻止空白筆記之後，還有另一個問題：什麼都不發生，使用者會不會以為按鈕壞了？

第一版可以有兩種做法。

一種是直接停止新增，不顯示任何訊息。另一種是在輸入框附近顯示「請輸入筆記內容」。

我暫時傾向顯示簡短提示，因為使用者至少會知道這次沒有儲存成功的原因。

不過，我不想為了一句提示立刻加入複雜的彈出視窗。先用輸入框下方的小段文字就夠了，而且使用者重新輸入內容後，提示也應該消失。

小功能也需要做決定

原本以為「不要新增空白筆記」只需要一行判斷，真正拆開後，還是出現了不少細節：

• 什麼情況算是空白？
• 前後空格要不要保留？
• 阻止新增後要不要提示？
• 提示應該出現在哪裡？
• 使用者重新輸入後，提示什麼時候消失？

Codex 可以幫我產生程式碼，但這些行為仍然要由我決定。

今天沒有一次加入很多功能，只處理一個很小的防呆。不過，這也是我第一次刻意縮小交給 Codex 的任務，再透過不同輸入情況確認結果。

下一篇，我會處理儲存成功後的狀態：清空輸入框、移除錯誤提示，並讓游標回到可以繼續輸入的位置。